<route lang="json5" type="payList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '设备 > 转给别人',
    enablePullDownRefresh:false,
    onReachBottomDistance:50,
  },
}
</route>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { getPayList } from '@/api/device'

const toast = useToast()
const selectList = ref([])
const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const page = ref(1)
const dataList = ref([]) // 列表数据
const total = ref(50) // 总数据量
function loadMore() {
  console.log('滚动到底部加载更多数据')
  if (loadState.value === 'finished') {
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  loadMore()
})

onReachBottom(() => {
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
const showVerify = ref(false)
const showUnbind = ref(false)
const model = reactive<{
  phoneTel: string
  verifCode: string
}>({
  phoneTel: '',
  verifCode: '',
})

const form = ref()
const labelWidth = {
  'label-width': '70px',
}
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      console.log('校验通过')
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
const rules = {
  phoneTel: [
    { required: true, message: '请输入手机号' },
    { required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
  ],
  verifCode: [
    { required: true, message: '请输入验证码' },
    { required: true, pattern: /^\d{6}$/, message: '请输入6位数字验证码' },
  ],
}
function handleEdit() {
  showVerify.value = true
  if (form.value) {
    form.value.reset()
  }
}
function handleClose() {
  showVerify.value = false
}
function selectItem(index: number) {
  if (selectList.value.includes(index)) {
    selectList.value = selectList.value.filter(item => item !== index)
  }
  else {
    selectList.value.push(index)
  }
}
function handleUnbind() {
  showUnbind.value = true
}
const codeDisabled = ref(false)
const timer = ref<number>()
function getCode() {
  toast.success('验证码已发送')
  // codeDisabled.value = true
  // timer.value = setTimeout(() => {
  //   codeDisabled.value = false
  // }, 60000)
}
// onUnload(() => {
//   clearTimeout(timer.value)
// })
</script>

<template>
  <view class="bottom-btn-pd2">
    <view class="wot-list-top-wrap">
      <view class="wot-row wot-title">
        <wd-row>
          <wd-col :span="7">
            <view class="wot-item">
              设备ID
            </view>
          </wd-col>
          <wd-col :span="4">
            <view class="wot-item">
              转入状态
            </view>
          </wd-col>
          <wd-col :span="4">
            <view class="wot-item">
              对方商户
            </view>
          </wd-col>
          <wd-col :span="9">
            <view class="wot-item">
              发起时间
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
    <view v-if="dataList.length === 0" class="pt-20">
      <wd-status-tip image="content" tip="暂无内容" />
    </view>
    <view v-else class="wot-list">
      <wd-checkbox-group v-model="selectList">
        <view v-for="(item, index) in dataList" :key="index" class="wot-row" @click.stop="selectItem(index)">
          <wd-row>
            <wd-col :span="7">
              <view class="wot-item wot-checkbox-item">
                <view class="checkbox-item">
                  <wd-checkbox :model-value="index" />
                </view>
                <view class="checkbox-text">
                  28744324238{{ index }}
                </view>
              </view>
            </wd-col>
            <wd-col :span="4">
              <view class="wot-item">
                <wd-tag custom-class="tag" type="success">
                  成功
                </wd-tag>
              </view>
            </wd-col>
            <wd-col :span="4">
              <view class="wot-item">
                kashdjas
              </view>
            </wd-col>
            <wd-col :span="9">
              <view class="wot-item">
                2025-11-01 10:00
              </view>
            </wd-col>
          </wd-row>
        </view>
      </wd-checkbox-group>
      <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
    </view>
    <safe-bottom>
      <wd-button type="primary" size="small" custom-class="option-btn" block @click="handleEdit()">
        （同意）对方设备转入
      </wd-button>
      <wd-button type="primary" size="small" plain block @click="handleUnbind()">
        （拒绝）对方设备转入
      </wd-button>
    </safe-bottom>

    <wd-popup v-model="showUnbind" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="overflow: hidden;border-radius:32rpx 32rpx 0 0;" @close=" showUnbind = false">
      <view class="wot-form-title">
        【 解绑设备（批量） 】
      </view>
      <view class="action-sheet-content">
        <view class="text-center">
          确定要解绑一下设备？
        </view>
        <view class="device-List">
          <template v-if="selectList.length > 0">
            <view v-for="(item, index) in selectList" :key="index">
              <wd-tag custom-class="space" type="primary">
                28744324238{{ index }}
              </wd-tag>
            </view>
          </template>
          <view v-else class="text-center text-24rpx">
            暂无解绑设备
          </view>
        </view>
        <view class="tips">
          <view>1.设备解除绑定后, 此设备将不出现在你的商户后台;</view>
          <view>2.可重新扫码绑定设备;</view>
        </view>
        <view class="btn-outer-pd">
          <wd-button type="primary" size="small" block @click="handleEdit">
            确定
          </wd-button>
        </view>
      </view>
    </wd-popup>
    <wd-popup v-model="showVerify" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="overflow: hidden;border-radius:32rpx 32rpx 0 0;" @close=" showVerify = false">
      <view class="wot-form-title">
        【 安全验证 】
      </view>
      <view class="action-sheet-content">
        <wd-form ref="form" :model="model" :rules="rules">
          <wd-cell-group border>
            <wd-input
              v-model="model.phoneTel"
              class="i-border-b"
              label="手机号"
              v-bind="labelWidth"
              prop="phoneTel"
              clearable
              placeholder="请输入手机号"
            />
            <wd-cell prop="verifCode" title="验证码" required title-width="70px" custom-value-class="cell-left">
              <view class="flex">
                <wd-input
                  v-model="model.verifCode"
                  no-border
                  custom-style="display: inline-block; flex:1; vertical-align: middle"
                  placeholder="请输入验证码"
                />
                <wd-button custom-class="code-btn" size="small" :disabled="codeDisabled" @click="getCode">
                  获取验证码
                </wd-button>
              </view>
            </wd-cell>
          </wd-cell-group>
          <view class="tips">
            重要操作需要：短信验证
          </view>
          <view class="btn-outer-pd">
            <wd-button type="primary" size="small" block @click="handleSubmit">
              提交
            </wd-button>
          </view>
        </wd-form>
      </view>
    </wd-popup>
  </view>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
:deep(){
      .option-btn{
        margin-bottom: 20rpx;
    }
    }
.wot-checkbox-item{
  position: relative;
  .checkbox-item{
    position: absolute;
    z-index: 0;
  }
  .checkbox-text{
    position: relative;
    z-index: 0;
    padding-left: 38rpx;
  }
}
:deep(){
  .code-btn{
    font-size: 24rpx;
    margin-left: 10px;
    width: 90px;
  }
  .space{
    margin: 10rpx;
    width: 150rpx;
    text-align: center;
  }
}
.tips{
  font-size: 24rpx;
  color: red;
  padding-left: 38rpx;
}
.device-List{
  margin: 40rpx;
  padding: 20rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
}
.bottom-btn-pd2{
  padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
}
</style>
